<template>
    <div class="grading-interface">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>2024一年级期末考试</span>
        </div>
        <div v-for="(question, index) in questions" :key="index" class="question-item">
          <p><strong>题目 {{ index + 1 }}:</strong> {{ question.text }}</p>
          <p><strong>学生回答:</strong> {{ question.answer }}</p>
          <el-input-number v-model="question.score" :min="0" :max="question.maxScore" label="分数"></el-input-number>
        </div>
        <el-button type="primary" @click="submitScores">确定</el-button>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        questions: []
      };
    },
    created() {
      this.fetchQuestions();
    },
    methods: {
      async fetchQuestions() {
        // 假设你有一个 API 来获取题目和回答
        const response = await this.$http.get('/api/questions');
        this.questions = response.data.map(q => ({
          ...q,
          score: 0
        }));
      },
      submitScores() {
        // 提交分数到后端
        const scores = this.questions.map(q => ({
          id: q.id,
          score: q.score
        }));
        this.$http.post('/api/submit-scores', { scores }).then(() => {
          this.$message.success('分数提交成功');
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .grading-interface {
    padding: 20px;
  }
  .question-item {
    margin-bottom: 20px;
  }
  </style>